@import "../constant.scss"; 
.modal-mask{
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    display: flex;
    justify-content:center;
    align-items:center;
    background-color: rgba(0,0,0,0.5);
    .modal-wrap{
        z-index:99;
        height:300px;
        width: 40%;
        max-width:500px;
        transform: translate(0,-20%);
        background-color: $foregroundColor;
        color:$spanColor;
        position:relative;
        animation:slideDown .3s;
        border-radius: 5px;
        .header {
            height:100px;
            .title{
                padding-top:20px;
                font-size:22px;
            }
        }
        .body{
            max-height:140px;
        }
        .footer{
            height:40px;
            position: absolute;
            bottom: 0;
            width: 100%;
            .cancel{
                
                border-radius: 0 0 0 5px;
                color:#c1c4c9;
                &:hover{
                    // background-color: rgb(221,221,221);
                    color: $mattedSpanColor;
                }
            }
            .confirm{
                border-radius: 0 0 5px 0;
                color: #c1c4c9;
                &:hover{
                    // background-color: rgb(221,221,221);
                    color: $mattedSpanColor;
                }
            }
            .cancel,.confirm{
                display: inline-block;
                height:40px;
                line-height: 40px;
                width:50%;
                font-size:15px;
                cursor: pointer;
            }
        }
    }
}
@keyframes slideDown{
    from{margin-top:-120px}
    to{margin-top:0px}
}